<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue-drag-formdesign</title> 
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jjxliu306/vue-form-design@2.0.10/lib/vue-drag-formdesign.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>

<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://cdn.jsdelivr.net/gh/jjxliu306/vue-form-design@2.0.10/lib/vue-drag-formdesign.umd.min.js"></script>

</head> 
<body>
<div id="app"> 

    <el-tabs v-model="activeName" style="padding: 20px;" @tab-click="changeTab">
        <el-tab-pane label="表单绘制" name="first">
            <vue-drag-formdesign ref="formDesign" >
                
                <template  slot="formName">
                    <span> vue-drag-formdesign 示例 </span>
                </template>
                

            </vue-drag-formdesign> 
        </el-tab-pane>
        <el-tab-pane label="表单查看" name="second">
            <el-alert
            title="测试表单预览"
            type="warning">
          </el-alert> 
             <el-button   type="primary" size="mini"  @click="validator()">验证</el-button>
             <el-button   type="primary" size="mini"  @click="getData()">获取数据</el-button>
          
            <vue-drag-form-build ref="formbuild" :form-template="formTemplate" :models="models" />

 

           
        </el-tab-pane> 
      </el-tabs>
     
   
</div>

<script>
new Vue({
  el: '#app',
  data: {
    activeName: 'first',
    models: {} ,
    formTemplate: {list:[] , config:{}} ,
  },
   mounted() { 
  },
   methods: {
     
    validator() {
      this.$refs.formbuild.validator().then((valid)=>{
        if(valid){
          this.$message.info('验证通过')
        } else {
          this.$message.error('验证不通过')
        }
      })
    },
    changeTab(v) {
      if(v && v.name == 'second') {
       
        this.formTemplate =  this.$refs.formDesign.getModel()
        const list = this.formTemplate.list 
        if(list) {
          const templateModels = list.map(t=>t.model)
          for(let i in this.models) {
            if(!templateModels.includes(i)) {
              delete this.models[i]
            }
          }
         // 2021-04-06 顺带重置models 将
        }
        //this.models = {}
      } 
    },
    getData() {
      this.$refs.formbuild.getData().then((data)=>{
        console.log('data' , data)
      })
    }
  }
})
</script>
</body>
</html>